<template>
	<view>
		<!-- <view class="cu-custom solid-bottom-after header">
			<view class="cu-bar fixed">
				<view class="header-title">包头吧</view>
				<view class="action">
					<text class="cuIcon-edit"></text>
					<text>发帖</text>
				</view>
			</view>
		</view> -->
		<cu-custom bgColor="solid-bottom-after bg-white" :isBack="false"><block slot="backText">包头吧</block><block slot="content">包头吧</block></cu-custom>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text> 热门话题
			</view>
			<view class="action text-orange">
				更多>
			</view>
		</view>
		<view class="grid ask-wall col-2 padding">
			<view class="margin-bottom" @click="goClassUrl">
				<view class="flex">
					<image src="../../static/temp/Morgana.png" class="cover" mode=""></image>
					<view class="class-item">
						<view class="title">#晒宠物#</view>
						<view class="info">451参与</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom">
				<view class="flex">
					<image src="../../static/temp/big21016.jpg" class="cover" mode=""></image>
					<view class="class-item">
						<view class="title">#晒美食#</view>
						<view class="info">451参与</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom">
				<view class="flex">
					<image src="../../static/temp/big37006.jpg" class="cover" mode=""></image>
					<view class="class-item">
						<view class="title">#不文明曝光#</view>
						<view class="info">451参与</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom">
				<view class="flex">
					<image src="../../static/temp/big39000.jpg" class="cover" mode=""></image>
					<view class="class-item">
						<view class="title">#拒绝远光灯#</view>
						<view class="info">451参与</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom">
				<view class="flex">
					<image src="../../static/temp/big21016.jpg" class="cover" mode=""></image>
					<view class="class-item">
						<view class="title">#找拼车#</view>
						<view class="info">451参与</view>
					</view>
				</view>
			</view>
			<view class="margin-bottom">
				<view class="flex">
					<image src="../../static/temp/big37006.jpg" class="cover" mode=""></image>
					<view class="class-item">
						<view class="title">#游戏吧#</view>
						<view class="info">451参与</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav bl-nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in redNav" :key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<view class="cu-card ask-item">
			<view class="cu-item shadow solid-bottom">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<image class="cu-avatar round" src="../../static/temp/Morgana.png"></image>
						<view class="content flex-sub">
							<view>TNOK发布了分享</view>
							<view class="text-gray text-sm flex justify-between">
								3分钟前
							</view>
						</view>
					</view>
				</view>
				<view class="text-content" @click="goUrl">
					折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
				</view>
				<view class="grid flex-sub col-1">
					<image src="../../static/temp/big11010.jpg" class="ask-img"></image>
				</view>
				<view class="text-gray text-right padding footer">
					<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
					<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
					<text class="cuIcon-messagefill margin-lr-xs"></text> 30
				</view>
			</view>
			<view class="cu-item shadow solid-bottom">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<image class="cu-avatar round" src="../../static/temp/Morgana.png"></image>
						<view class="content flex-sub">
							<view>TNOK发布了分享</view>
							<view class="text-gray text-sm flex justify-between">
								3分钟前
							</view>
						</view>
					</view>
				</view>
				<view class="text-content">
					折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
				</view>
				<view class="grid flex-sub col-3">
					<image src="../../static/temp/big11010.jpg" class="ask-img"></image>
					<image src="../../static/temp/big25011.jpg" class="ask-img"></image>
					<image src="../../static/temp/big99008.jpg" class="ask-img"></image>
				</view>
				<view class="text-gray text-right padding footer">
					<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
					<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
					<text class="cuIcon-messagefill margin-lr-xs"></text> 30
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 1,
				redNav:[{title:'关注'},{title:'圈子'},{title:'点评'}]
			};
		},
		computed: {
			
		},
		created(){
			//alert(newsdata.length);
		},
		methods: {
			goUrl(){
				uni.navigateTo({
					url: '/pages/ask/info',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			goClassUrl(){
				uni.navigateTo({
					url: '/pages/ask/class',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
	}
</script>

<style lang='scss'>
	.header{
		height: 45px;
		.cu-bar{
			padding: 7px
		}
		.header-title{
			font-size: 22px;
			padding-left: 10px;
		}
		.action .cuIcon-edit{
			margin-right: 5px;
		}
	}
	.ask-wall{
		.cover{
			width:45px;
			height: 45px;
			border-radius: 6px;
			margin-right: 10px;
		}
		.class-item{
			.info{
				margin-top: 5px;
				font-size: 12px;
				color: #888;
			}
		}
	}
	.ask-item>.cu-item{
		margin: 5px 15px;
	}
	.ask-item{
		.text-content{
			margin:0 0 10px 0;
		}
		.col-1{
			.ask-img{
				width:85%;
				height: 150px;
				border-radius: 6px;
			}
		}
		.col-3{
			.ask-img{
				width: 32.666%;
				height: 80px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
			}
			.ask-img:nth-child(2){
				margin: 0 1%;
			}
		}
		.margin-lr-xs{
			margin-left: 15px;
		}
		.cu-list.menu-avatar>.cu-item:after{
			display: none;
		}
	}
	.nav{
		border-top: 6px solid #f1f1f1;
	}
	.cu-list.menu-avatar>.cu-item>.cu-avatar{
		left:0px;
	}
	.cu-list.menu-avatar>.cu-item .content{
		left:40px;
	}
	.cu-list.menu-avatar>.cu-item .content>uni-view:first-child{
		font-size: 14px;
	}
</style>
